<template>
  <div class="login-container">
    <div class="login-left">
      <img src="/src/assets/png/logo.png" class="logo" alt="医疗系统">
      <h1 class="project-name">{{ appName }} 临床信息管理系统</h1>
    </div>
    <div class="login-right">
      <div class="login-box">
        <div class="login-header">
          <h2>登录</h2>
        </div>

        <el-form :model="form" :rules="rules" ref="loginForm" class="login-form" @keyup.enter="submitForm">
          <!-- 医院名称 -->
          <el-form-item prop="hospitalId">
            <el-select v-model="form.hospitalId" placeholder="请选择医院" :prefix-icon="OfficeBuildingIcon" clearable>
              <el-option v-for="hospital in hospitals" :key="hospital.id" :label="hospital.name" :value="hospital.id" />
            </el-select>
          </el-form-item>

          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名/邮箱" :prefix-icon="UserIcon" clearable />
          </el-form-item>

          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码" :prefix-icon="LockIcon"
              show-password />
          </el-form-item>

          <!-- 记住用户名 -->
          <div class="form-options">
            <el-checkbox v-model="form.remember">记住用户名</el-checkbox>
          </div>

          <!-- 登录按钮 -->
          <el-button type="primary" @click="submitForm" :loading="loading" class="login-button">
            登 录
          </el-button>
        </el-form>

      </div>
      <div class="copyright">
        <p>© 2024 {{ appName }}临床信息管理系统 v{{ appVersion }}</p>
        <p>技术支持：{{ appCompany }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElButton,
  ElCheckbox,
  ElIcon
} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {
  User as UserIcon,
  Lock as LockIcon,
  OfficeBuilding as OfficeBuildingIcon
} from '@element-plus/icons-vue'

// 环境变量类型
interface ImportMeta {
  readonly env: {
    APP_NAME?: string
    APP_VERSION?: string
    APP_COMPANY?: string
  }
}

const loginForm = ref<FormInstance | null>(null)
const loading = ref<boolean>(false)

const appName = computed(() => (import.meta.env.APP_NAME || '医疗管理系统').toUpperCase())
const appVersion = computed(() => import.meta.env.APP_VERSION || '1.0.0')
const appCompany = computed(() => import.meta.env.APP_COMPANY || '重庆凯汇科技有限公司')

const hospitals = ref([
  { id: 1, name: '北京协和医院' },
  { id: 2, name: '上海瑞金医院' },
  { id: 3, name: '广州中山医院' },
  { id: 4, name: '成都华西医院' }
])

interface LoginForm {
  hospitalId: string
  username: string
  password: string
  remember: boolean
}

const form = reactive<LoginForm>({
  hospitalId: '',
  username: '',
  password: '',
  remember: false
})

// 验证规则
const rules = reactive<FormRules>({
  hospitalId: [
    { required: true, message: '请选择医院', trigger: 'change' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 30, message: '长度在3到30个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 16, message: '长度在8到16个字符', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,16}$/,
      message: '必须包含大小写字母、数字和特殊符号(!@#$%^&*)',
      trigger: 'blur'
    }
  ],
})

// 提交表单
import { useAuthStore } from '../../stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()

const submitForm = async () => {
  if (!loginForm.value) return

  try {
    loading.value = true
    await loginForm.value.validate()

    // 模拟登录API调用
    const mockToken = 'mock-jwt-token-' + Date.now()
    authStore.setToken(mockToken)

    // 跳转到首页
    router.push('/')
  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
/* 基础容器样式 */
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 100;
  transition: background-color 0.3s ease;
}

.login-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--primary-bg);
  color: var(--text);
  padding: 2rem;
  min-height: 200px;
  transition: background-color 0.3s ease, color 0.3s ease;

  .logo {
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
    max-width: 128px;
    max-height: 128px;
  }

  .project-name {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 700;
    margin-top: 1rem;
    text-align: center;
    padding: 0 1rem;
  }
}

.login-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  padding: 2rem 0;
  width: 100%;
  transition: background-color 0.3s ease;
}

/* 登录框主体 */
.login-box {
  width: 90%;
  max-width: 24rem;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0e0e0;
  margin-bottom: 1.5rem;
}

/* 头部样式 */
.login-header {
  text-align: center;
  margin-bottom: 1rem;
  padding: auto 0;

  h2 {
    color: #007080;
    font-size: clamp(1rem, 3vw, 1.25rem);
    margin-bottom: 0.5rem;
  }

  p {
    color: #909399;
    font-size: 12px;
  }
}

/* 表单样式 */
.login-form {
  margin-top: 1.5rem;

  .el-form-item {
    margin-bottom: 1.5rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  /* 输入框样式 */
  :deep(.el-input__wrapper) {
    height: 44px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #dcdfe6;

    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px #409EFF;
    }
  }
}

/* 选项区域 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0;
}

/* 响应式布局 */
@media (min-width: 768px) {
  .login-container {
    flex-direction: row;
  }

  .login-left {
    flex: 1;
    min-height: auto;
  }

  .login-right {
    flex: 1;
  }
}

@media (min-width: 1024px) {
  .login-left {
    flex: 3;
  }

  .login-right {
    flex: 1;
  }
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 44px;
  margin-bottom: 20px;
  font-size: 16px;
  border-radius: 4px;
  background: var(--primary);
  border: none;
  color: white;
  transition: background-color 0.3s ease;

  &:hover {
    background: #008899;
  }

  &:active {
    background: #006070;
  }

  &.is-loading {
    opacity: 0.8;
  }
}

/* 版权信息 */
.copyright {
  text-align: center;
  color: #909399;
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 1rem;
  width: 90%;
  max-width: 24rem;
  padding: 0 2rem;
}

/* 调试样式 */
.debug-border {
  border: 1px solid red !important;
}
</style>
